<template>
  <div>    
      <el-table :data="dataList" border >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="规格名称" prop="spec_name"></el-table-column>        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="choose(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="total" :current-page="query.page" :page-size="query.pageSize" @current-change="pageChange"></el-pagination>    
  </div>
</template>

<script>
import {page} from "@/api/shop/spec"
  export default {
    
    data(){
      return {
        query:{
          page:1,
          pageSize:10,
        },
        total:0,
        dataList:[],
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        page(this.query).then(res=>{
          this.dataList = res.data;
          this.total = res.total;
        })
      },
      pageChange(page){
        this.query.page = page;
        this.getData();
      },
      choose(row){
        this.$emit("choose",row)
      }
    }
  }
</script>
<style scoped>
</style>